localhost跨域问题解决

2023-06-10 03:43| 来源: 网络整理| 查看: 265

建立一个简单的springboot项目，在vue中使用axios发送请求，结果却出现报错

什么是跨域？

同源策略：为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能去读写对方的资源

什么是同源

所谓同源就是指两个页面有相同的协议，主机和端口号，一旦其中有一个不一样，就是不同源，此时无法读取非同源网页的Cookie，当然也就无法发送axios请求

CORS全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来说没有什么工作量，和正常发送请求写法上没有任何区别，工作量基本都在后端这里。每一次请求，浏览器必须先以OPTIONS请求方式发送一个预请求（也不是所有请求都会发送 options，展开介绍点我），通过预检请求从而获知服务器端对跨源请求支持的 HTTP方法。在确认服务器允许该跨源请求的情况下，再以实际的HTTP请求方法发送那个真正的请求。推荐的原因是：只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是正式环境都能方便的使用。详细 MDN 文档

但总有后端觉得麻烦不想这么搞，那纯前端也是有解决方案的。

在dev开发模式下可以使用 webpack 的proxy也很方便，参照文档就会使用了，楼主一些个人项目使用的就是该方法。但这种方法在生产环境是不能使用的。在生产环境中需要使用 nginx 进行反向代理。不管是proxy 和nginx 的原理都是一样的，通过搭建一个中转服务器来转发请求从而规避跨域的问题。

开发环境生产环境corscorsproxynginx 解决方法 1、Springboot中配置CORS

直接添加注解@CrossOrigin

@CrossOrigin @RestController @RequestMapping("/user") public class UserController { }

但是这个方法只会在本Controller中起作用，在别的Controller上也需要加，比较繁琐

2、全局跨域处理

配置一个跨域过滤器

import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; import org.springframework.web.filter.CorsFilter; @Configuration public class MyCorsConfig { @Bean public CorsFilter corsFilter(){ CorsConfiguration config = new CorsConfiguration(); //允许谁来异步访问 // config.addAllowedOrigin("*"); //允许所有人访问，不安全不推荐 config.addAllowedOrigin("http://localhost:7777"); //这里写允许访问的前端服务器 config.setAllowCredentials(true); //传递cookie config.addAllowedMethod("*"); //允许哪些方法访问(*是全部方法) // config.addAllowedMethod("OPTIONS"); // config.addAllowedMethod("HEAD"); // config.addAllowedMethod("GET"); // config.addAllowedMethod("PUT"); // config.addAllowedMethod("POST"); // config.addAllowedMethod("DELETE"); // config.addAllowedMethod("PATCH"); // 允许的头信息 config.addAllowedHeader("*"); //过滤资源 UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource(); configSource.registerCorsConfiguration("/**",config); return new CorsFilter(configSource); } } 测试

页面成功跳转

【本文地址】

公司简介

联系我们